import React, { useEffect, useState } from 'react';
import {useNavigate} from 'react-router-dom'
import axios from 'axios'
import './index.css'
const Index = () => {
    const navigate =useNavigate()
    const [flms,setjcom] =useState([])
    const fecthData =async ()=>{
    var res =await axios.get("http://122.112.161.135:4000/api/movie/inTheaters")
    console.log(res.data.res);
    setjcom(res.data.res)
    }
    const toggle=(id)=>{
        console.log(id);
        navigate(`/detail/${id}`)
    }
    useEffect(()=>{
        fecthData();
    },[])
    return (
        <div className="naer">
            {flms.map(item=>{
                return (<div onClick={()=>toggle(item._id)} key={item._id}>
                    <img className="nawr" src={item.pic} alt="" />
                    <p>{item.title}</p>
                </div>)
            })}
        </div>
    );
}

export default Index;
